<template>
	<el-container style="width: 90%;margin: 30px auto 0;">
		<el-header style="border-bottom: 2px solid #f56c6c;">
			<div style="display: flex;width: 100%;">
				<el-button style="background-color: #f56c6c;color: white;">请输入查询内容</el-button>
				<el-input  placeholder="请输入内容" style="width: 90%;"></el-input>
				<el-button type="danger"></el-button>
			</div>
		</el-header>
		<el-container>
			<el-aside width="300px" >
				<p @click="btn(0)">所有类型的商品</p>
				<div v-for="item in newMenus" :key="item">
					<p style="border-bottom: 1px solid black;line-height: 40px;" @click="btn(item.id)">
						{{item.type}}
					 </p>
					<div style="display: flex;width: 90%;margin: 0 auto;">
						<span style="text-align: left;font-size: 10px;margin-left: 10px;" v-for="(item , index) in item.child" :key="index" @click="btn(item.id)">{{item.type}}</span>
					</div>
				</div>
			</el-aside>
			<el-main >
				<!-- {{dianji}} -->
				<div style="display: flex;width: 49.5%;float: left;margin-top: -20px;height: 250px;" v-for="(item , index) in dianji" :key="index">
					<div style="width: 30%;text-align: center;">
						<img :src="`${$Imgurl}/api/public/showImg/${item.picture}`" style="width: 90%;height: 80%;"/>
					</div>
					<div style="width: 65%;">
						<p>{{item.name}}</p>
						<p>{{item.author}}</p>
						<p>{{item.publisher}}</p>
						<p>
							￥{{item.price}}
							<el-button type="danger">购买</el-button>
						</p>
					</div>
				</div>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
export default{
	name:'Detail',
	data(){
		return{
			list1:[],
			newMenus:[],
			// 
			dianji:[],
		}
	},
	created() {
		this.axios.get('/api/public/type/findAll2').then( (res)=>{
			this.list1 = res.data.data;
			console.log(this.list1);
			this.getMenu( 0 , this.newMenus);
		} ).catch( (error)=>{
			console.log(error);
		} )
		// 
	},
	methods:{
		// 递归函数
		getMenu( id , arr){
			// 判断
			if( id === 0){
				// 第一级菜单
				this.list1.forEach( item=>{
					if(item.pid === 0){
						arr.push(item);
					}
				});
				// 在第一级菜单完成之后，从第一级的第一个菜单开始，进入第二季菜单的筛选
				this.getMenu( this.newMenus[0].id , this.newMenus);
			}else{
				// 其他等级的菜单
				// 1.循环等级数组：给每个第一级找到第二级
				arr.forEach( (item)=>{
					// 2.将list整个循环，将每个第一级找到第二级
					this.list1.forEach( (val)=>{
						// 判断父级的id === 数据的pid【符合：数据是父级的子级菜单】
						if(item.id === val.pid){
							// 声明一个下一维度的数组
							if( !item.child ) item.child = [];
							// 将符合条件的数据，添加到child下
							item.child.push(val);
						}
					});
					// 每一个等级的36次循环结束之后，重新调用函数，进入下一个等级的操作
					if( item.child){
						// 终止程序
						this.getMenu( 1 , item.child)
					}
				})
			}
		},
		btn(id){
			this.axios.get('/api/public/findBookByPage/0/8/'+id+'').then( (res)=>{
				this.dianji = res.data.data.books;
				console.log(this.dianji);
			} ).catch( (error)=>{
				console.log(error);
			} )
		}
	}
}
</script>

<style scoped>
/*  */
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
